---
import { CopyButton } from './buttons/CopyButton'
import { LinkButton } from './buttons/LinkButton'
import { OpenPageDropdown } from './OpenPageDropdown/OpenPageDropdown'
import { PAGE_TITLE_ID } from './TableOfContent/constants'

const { origin, pathname } = Astro.url
const normalizedPath = pathname.replace(/\/$/, '')
const markdownUrl = `${origin}${normalizedPath || '/docs/en'}.md`

const markdownRaw = Astro.props.entry.body
---

{
  !Astro.props.entry.data.hideTitleOnPage && (
    <h1 id={PAGE_TITLE_ID}>{Astro.props.entry.data.title}</h1>
  )
}
<div class="title-actions">
  <CopyButton client:load value={markdownRaw} variant="ghost"
    >{Astro.props.labels['header.copyForLlms']}</CopyButton
  >
  <LinkButton
    client:load
    href={markdownUrl}
    target="_blank"
    variant="ghost"
    className="desktop-only"
  >
    <svg stroke-linejoin="round" viewBox="0 0 22 16" height="16" width="16">
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M19.5 2.25H2.5C1.80964 2.25 1.25 2.80964 1.25 3.5V12.5C1.25 13.1904 1.80964 13.75 2.5 13.75H19.5C20.1904 13.75 20.75 13.1904 20.75 12.5V3.5C20.75 2.80964 20.1904 2.25 19.5 2.25ZM2.5 1C1.11929 1 0 2.11929 0 3.5V12.5C0 13.8807 1.11929 15 2.5 15H19.5C20.8807 15 22 13.8807 22 12.5V3.5C22 2.11929 20.8807 1 19.5 1H2.5ZM3 4.5H4H4.25H4.6899L4.98715 4.82428L7 7.02011L9.01285 4.82428L9.3101 4.5H9.75H10H11V5.5V11.5H9V7.79807L7.73715 9.17572L7 9.97989L6.26285 9.17572L5 7.79807V11.5H3V5.5V4.5ZM15 8V4.5H17V8H19.5L17 10.5L16 11.5L15 10.5L12.5 8H15Z"
        fill="currentColor"
      >
      </path>
    </svg>
    {Astro.props.labels['header.viewAsMarkdown']}
  </LinkButton>
  <OpenPageDropdown
    client:load
    locale={Astro.props.locale}
    url={markdownUrl}
    className="right"
  />

  {
    (Astro.props.entry.data.licence || Astro.props.entry.data.distribution) && (
      <dl class="tiers-distribution-list">
        <div>
          <>
            <dt>Licence:</dt>
            <dd>{Astro.props.entry.data.licence}</dd>
          </>
        </div>
        <div>
          <>
            <dt>Distribution:</dt>
            <dd>{Astro.props.entry.data.distribution}</dd>
          </>
        </div>
      </dl>
    )
  }

  <style>
    .tiers-distribution-list {
      margin: 0;
      border-left: 1px solid var(--hover-color);
      padding-left: 8px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      > div {
        display: inline-flex;
        font-family: 'Inter', sans-serif;
        font-weight: 500;
        font-size: 0.75rem;
        line-height: 1.4;
        letter-spacing: -0.02em;
        > dt {
          color: var(--secondary-text-color);
        }
        > dd {
          color: var(--primary-text-color);
          margin-left: 1ch;
        }
      }
    }
    h1 {
      margin-bottom: unset !important;
    }

    .title-actions {
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border-color);
      font-size: 0.8125rem;
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .title-actions:first-child {
      margin-top: 40px;
    }

    .right {
      margin-left: auto;
    }

    @media (max-width: 650px) {
      .desktop-only {
        display: none;
      }
    }
  </style>
</div>
